<template>
  <div id="enroll" :style="{minHeight: minheight}">
    <div class="enroll-bg" :style="{minHeight: minheight}">
      <div class="enroll-form">
        <p class="title">报名登记</p>
        <van-cell-group class="van-cell-group-no-bg">
          <van-cell title="学校所在地区" isLink :value="area || '请选择'" @click="showAddress = true" />
          <van-cell title="学校类型" isLink :value="schoolsType.text || '请选择'" @click="handleShowSchoolsType" />
          <van-cell title="学校名称" isLink :value="schools.text || '请选择'" @click="handleShowSchools" />
          <van-cell title="所在年级" isLink :value="grade.text || '请选择'" @click="handleShowGrade" />
          <van-cell title="所在班级" isLink :value="classes.text || '请选择'" @click="handleShowClasses" />
          <van-field
            v-model="realName"
            label="学生姓名"
            icon="clear"
            placeholder="请输入您的姓名"
            @click-icon="realName = ''"
          />
          <van-field
            v-model="tel"
            type="tel"
            :maxlength="11"
            label="手机号码"
            icon="clear"
            placeholder="请输入您的手机号码"

            @click-icon="tel = ''"
          />
        </van-cell-group>
        <div style="padding: 10px 40px;">
          <van-button class="border-radius" style="border: 0.5px solid #fff;" size="normal" type="primary" block :loading="subLoading" @click="submit">提交</van-button>
        </div>

        <AreaPicker
          v-model="showAddress"
          @onConfirm="handleAreaCofirm"
        ></AreaPicker>

        <van-popup v-model="showSchoolsType" position="bottom" :close-on-click-overlay="false">
          <van-picker show-toolbar title="选择学校类型" @confirm="onSchoolsTypeConfirm" @cancel="showSchoolsType = false" :columns="schoolsTypeData" />
        </van-popup>

        <van-popup v-model="showSchools" position="bottom" :close-on-click-overlay="false">
          <van-picker show-toolbar title="选择学校" @confirm="onSchoolsConfirm" @cancel="showSchools = false" :columns="schoolsData" />
        </van-popup>
        <van-popup v-model="showGrade" position="bottom" :close-on-click-overlay="false">
          <van-picker show-toolbar title="选择年级" @confirm="onGradeConfirm" @cancel="showGrade = false" :columns="gradeData" />
        </van-popup>

        <van-popup v-model="showClasses" position="bottom" :close-on-click-overlay="false">
          <van-picker show-toolbar title="选择班级" @confirm="onClassesConfirm" @cancel="showClasses = false" :columns="classesData" />
        </van-popup>


      </div>
    </div>
  </div>
</template>
<script>
import AreaPicker from "@/components/AreaPicker.vue"
export default {
  components: {
    AreaPicker
  },
  computed: {
    schoolsTypeId() {
      return this.schoolsType.id
    },
    schoolsId() {
      return this.schools.id
    },
    classesId() {
      return this.classes.id
    },
    gradeId() {
      return this.grade.id
    },
  },
  data() {
    return {
      profile: window.localStorage.profile,
      showAddress: false, // 省市区展示
      showSchoolsType: false, // 学校类型展示
      showSchools: false, // 学校展示
      showGrade: false, //年级展示
      showClasses: false, //班级展示

      area: '', //省市区
      provinceId: '', //省id
      cityId: '', //市id
      districtId: '', //区域ID
      realName: '', //姓名
      tel: '', //电话
      subLoading: false,
      datas: [], // 所有的数据
      schoolsTypeIndex: 0,
      schoolsTypeData: [], // 学校类型
      schoolsData: [], // 学校
      gradeData: [], //年级
      classesData: [], // 班级

      schoolsType: {
        id: 0,
        text: ''
      },

      schools: {
        id: 0,
        text: ''
      },
      grade: {
        id: '',
        text: ''
      },

      classes: {
        id: 0,
        text: ''
      },

      openid: window.localStorage.openId,
      minheight: document.documentElement.clientHeight + 'px'
    }
  },
  watch: {
    districtId: function (val) {
      this.getData()
      this.schoolsType = {
        id: 0,
        text: ''
      }
      this.schools = {
        id: 0,
        text: ''
      }
      this.classes = {
        id: 0,
        text: ''
      }
      this.grade = {
        id: 0,
        text: ''
      }
    },
    schoolsTypeId: function (val) {
      this.schools = {
        id: 0,
        text: ''
      }
      this.classes = {
        id: 0,
        text: ''
      }
      this.grade = {
        id: 0,
        text: ''
      }
    },
    schoolsId: function (val) {
      this.classes = {
        id: 0,
        text: ''
      }
      this.grade = {
        id: 0,
        text: ''
      }
    },
    gradeId: function (val) {
      this.classes = {
        id: 0,
        text: ''
      }
    },
  },
  methods: {
    //选择地区
    handleAreaCofirm(area) {
      this.area = Array.from(area, x => x.name).join(' ')
      this.provinceId = area[0].id
      this.cityId = area[1].id
      this.districtId = area[2].id
    },

    //获取所有数据
    getData() {
      this.$http('/api/common/school', {
        districtId: this.districtId
      }).then(data => {
        this.datas = data
        this.initSchoolsTypeData()
        this.initSchoolsData(0)
        this.initGradeData(0, 0)
        this.initClassesData(0, 0, 0)
      }).catch(err => {

      })
    },

    //初始化学校类型
    initSchoolsTypeData() {
      try {
        let schoolsTypeData = Array.from(this.datas, x => ({
          id: x.id,
          text: x.title
        }))
        this.schoolsTypeData = schoolsTypeData
      } catch (err) {

      }
    },

    //初始化学校
    initSchoolsData(index) {
      try {
        const schools = this.datas[index].schools
        let schoolsData = Array.from(schools, x => ({
          id: x.id,
          text: x.title
        }))
        this.schoolsData = schoolsData
      } catch (err) {

      }
    },

    //初始化班级
    initGradeData(index, idx) {
      try  {
        const grade = this.datas[index].schools[idx].grade
        let gradeData = Array.from(grade, x => ({
          id: x.id,
          text: x.title
        }))
        this.gradeData = gradeData
      } catch(err) {

      }
    },

    //初始化班级
    initClassesData(index, idx, i) {
      try {
        const classes = this.datas[index].schools[idx].grade[i].classes
        let classesData = Array.from(classes, x => ({
          id: x.id,
          text: x.title
        }))
        this.classesData = classesData
      } catch(err) {

      }
    },

    //显示学校类型picker
    handleShowSchoolsType() {
      if (!this.districtId){
        this.$toast('请选择学校所在地区')
        return
      }
      this.showSchoolsType = true
    },
    //学校类型picker确认
    onSchoolsTypeConfirm(val, index) {
      this.schoolsTypeIndex = index
      this.initSchoolsData(index)
      this.initGradeData(index, 0)
      this.initClassesData(index, 0, 0)
      this.schoolsType = val
      this.showSchoolsType = false
    },

    //显示学校picker
    handleShowSchools() {
      if (!this.districtId){
        this.$toast('请选择学校所在地区')
        return
      }
      this.showSchools = true
    },
    //学校picker确认
    onSchoolsConfirm(val, index) {
      this.initGradeData(this.schoolsTypeIndex, index)
      this.initClassesData(this.schoolsTypeIndex, index, 0)
      this.schools = val
      this.showSchools = false
    },

    //显示年级picker
    handleShowGrade() {
      if (!this.districtId){
        this.$toast('请选择学校所在地区')
        return
      }
      this.showGrade = true
    },

    //显示班级picker
    handleShowClasses() {
      if (!this.districtId){
        this.$toast('请选择学校所在地区')
        return
      }
      this.showClasses = true
    },
    //年级picker确认
    onGradeConfirm(val, index) {
      this.grade = val
      this.initClassesData(this.schoolsTypeIndex, index, 0)
      this.showGrade = false
    },
    //班级picker确认
    onClassesConfirm(val) {
      this.classes = val
      this.showClasses = false
    },

    submit() {
      if (!this.districtId) {
        this.$toast('请选择所在区域')
        return
      }
      if (!this.schoolsId) {
        this.$toast('请选择学校')
        return
      }
      if (!this.gradeId) {
        this.$toast('请选择年级')
        return
      }

      if (!this.classesId) {
        this.$toast('请选择班级')
        return
      }
      if (!this.realName.trim()) {
        this.$toast('请输入您的姓名')
        return
      }

      var reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
      if(!reg.test(this.tel)) {
        this.$toast('请填写正确的手机号码')
        return
      }

      this.subLoading = true
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: '正在提交信息'
      })
      this.$http('/api/member/editProfile', {
        openId: window.localStorage.openId,
        provinceId: this.provinceId,
        cityId: this.cityId,
        districtId: this.districtId,
        gradeId: this.gradeId,
        schoolId: this.schoolsId,
        classId: this.classesId,
        realName: this.realName,
        mobile: this.tel
      }).then(res => {
        window.localStorage.profile = 1
        this.$toast.success('提交成功')
        this.$router.go(-1)
      }).catch(err => {
        this.subLoading = false
        this.$toast(err.msg || '提交失败')
      })
    }
  }
}
</script>
<style scoped>
#enroll{
  background: #177f45 url('../../static/images/enroll-line.png') repeat-y;
}
.enroll-bg{
   background: #177f45 url('../../static/images/enroll.png') no-repeat top center;
   background-size: 100% 100%;
}
.enroll-form{
  background: rgba(19, 153, 42, 0.4);
  position: absolute;
  left: 20px;
  right: 20px;
  top: 73px;
  border-radius: 5px;
  border: 0.5px solid #fff;
}
.enroll-form .title{
  color: #fff;
  text-align: center;
  height: 45px;
  line-height: 44px;
  font-size: 17.5px;
}

</style>
